<template>
	<view class="mainCon">
		<view class="tabHead">
			<view class="tabItem" :class="current==index?'active':''" v-for="(item,index) in tabList"
				@click="tapChange(index)">
				{{item}}
			</view>
		</view>
		<view class="orderList">
			<view class="orderItem" v-for="(item,index) in orderList">
				<view class="orderHead">
					<view class="headcell">
						<view class="leftCon">
							<view class="labelTag">
								提单号：
							</view>
							{{item.bill_no}}
						</view>
						<view class="status1">
							<template v-if="item.work_way=='FOEI'">
								返空
							</template>
							<template v-if="item.work_way=='EOFI'">
								返重
							</template>
							<template v-if="item.work_way=='FINO'">
								返重
							</template>
							<template v-if="item.work_way=='EINO'">
								返空
							</template>
							<template v-if="item.work_way=='EOEI'">
								返空
							</template>
							<template v-if="item.work_way=='EITC'">
								返空
							</template>
						</view>
					</view>
					<view class="headcell">
						<view class="dateLabel">
							有效期 : {{item.DEADLINE}}
						</view>
						<view class="status2">
							<template v-if="current==0">
								待办单
							</template>
						</view>
					</view>
				</view>
				<view class="orderInfo">
					<view class="infoCell">
						<view class="labelTag">
							箱型尺寸：
						</view>
						<view style="display: flex;align-items: center;">
							<view class="infoCon">
								{{item.xc}}
							</view>

							<view class="infoCon" style="margin: 0 20rpx;">
								{{item.xx}}
							</view>

							<view class="infoCon">
								{{item.xh}}
							</view>
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							委托单号
						</view>
						<view class="infoCon">
							{{item.CONTRACT_NO}}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							车牌号
						</view>
						<view class="infoCon">
							{{item.carcode}}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							船名/航次
						</view>
						<view class="infoCon">
							{{item.SHIPNAME}} / {{item.voyage}}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							业务属性
						</view>
						<view class="infoCon">
							{{item.trade_id=='1'?'外贸':'内贸'}}
						</view>
					</view>
					<view class="infoCell" v-if="current==2">
						<view class="labelName">
							箱位
						</view>
						<view class="infoCon">
							{{item.CNTRPLAC}}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							箱主
						</view>
						<view class="infoCon">
							{{item.XGS}}
						</view>
					</view>

					<!-- 	<view class="infoCell">
						<view class="labelName">
							提箱截止日期
						</view>
						<view class="infoCon">
							内贸
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							EIR
						</view>
						<view class="infoCon">
							内贸
						</view>
					</view> -->
				</view>
				<view class="bottomActions">

					<view class="delete" @click="tapCancel(item)" v-if="current==1">
						取消预约
					</view>
					<view class="confirm" @click="tapBandan(item)" v-if="current==0">
						确认办单
					</view>
					<!-- <view class="confirm" @click="tapShowMap(item)" v-if="current==2">
						查看地图位置
					</view> -->
				</view>
			</view>
		</view>
		
		<view v-if="current==1&&orderList.length>0" class="cxtxSubmit">
			<u-button :custom-style="customStyle" type="primary" @click="cxtxSubmit">拆箱收箱</u-button>
		</view>
		
		<view style="margin-top: 100rpx;" v-if="orderList.length==0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		<u-modal v-model="showmodal" :show-cancel-button="true" @confirm="onconfirmmodal" @cancel="oncancelmodal">
			<view class="slot-content">
				<u-form-item label="铅封号：" label-width="150" label-align="right">
					<u-input v-model="qfh" placeholder="请输入铅封号" />
				</u-form-item>
				<u-form-item v-if="showXh" label="箱号：" label-width="150" label-align="right">
					<u-input v-model="xh" placeholder="请输入箱号" />
				</u-form-item>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ["待办单", "已预约", "作业中", "已完成"],
				current: 0,
				orderList: [],
				tel: "",
				flag: false,
				showmodal: false,
				qfh: "",
				xh: "",
				showXh: false,
				BACK_E_F: 0,
				E_F_ID: '',
				activeItem: undefined,
				// baseUrl: this.$store.state.baseUrl, // 生产地址
				baseUrl: 'https://tos.flatgroup.com.cn:9000/flt-api' // 本地地址
			};
		},
		onLoad() {
			//uni.getStorageSync("userInfo").mobile
			this.tel = uni.getStorageSync("userInfo").mobile
			this.getState1()
		},
		methods: {
			cxtxSubmit() {
				console.log('orderList', this.orderList)
				uni.request({
					url: 'https://tos.flatgroup.com.cn:9000/flt-api/zlkj/wechat/cxsx',
					method: 'post',
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					data: {
						list: this.orderList
					},
					success: (res) => {
						console.log(res)
						this.getState2()
						uni.showToast({
							title: '拆箱收箱成功',
							icon: 'success',
							duration: 2000
						})
					}
				})
			},
			tapChange(index) {
				this.current = index
				if (index == 0) {
					this.getState1()
				}
				if (index == 1) {
					this.getState2()
				}
				if (index == 2) {
					this.getState3()
				}
				if (index == 3) {
					this.getState4()
				}
			},
			getState1() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					// url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/bH1pBRdpmQt4lR7?tel=' + this.tel,
					url: this.baseUrl + '/zlkj/wechat/SX1/' + this.tel,
					method: "get",
					success: (res) => {
						// console.log(res.data);
						this.orderList = res.data.rows
						uni.hideLoading()
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '接口超时',
							icon: 'none'
						})
					}
				})
			},
			getState2() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					// url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/zyf0uRnP8MRR4zR?tel=' + this.tel,
					url: this.baseUrl + '/zlkj/wechat/SX2/' + this.tel,
					method: "get",
					success: (res) => {
						uni.hideLoading()
						// console.log(res.data);
						this.orderList = res.data.rows
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '接口超时',
							icon: 'none'
						})
					}
				})
			},
			getState3() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					// url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/lZcHDnH1GScUL43?tel=' + this.tel,
					url: this.baseUrl + '/zlkj/wechat/SX3/' + this.tel,
					method: "get",
					success: (res) => {
						uni.hideLoading()
						// console.log(res.data);
						this.orderList = res.data.rows
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '接口超时',
							icon: 'none'
						})
					}
				})
			},
			getState4() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: this.baseUrl + '/zlkj/wechat/SX4/' + this.tel,
					method: "get",
					success: (res) => {
						// console.log(res.data);
						this.orderList = res.data.rows
						uni.hideLoading()
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '接口超时',
							icon: 'none'
						})
					}
				})
			},
			tapBandan(item) {
				// uni.request({
				// 	url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/bQ69FXKGbG7BqI7?id=' + item.ID,
				// 	method: "get",
				// 	success: (res0) => {
				// 		if(res0.data.total>0){
				let that = this
				// if (that.flag) return
				that.flag = true
				that.BACK_E_F = item.BACK_E_F

				if (item.work_way == 'EOEI' || item.work_way == 'FOEI' || item.work_way == 'EITC' || item.work_way ==
					'EINO') {
					this.E_F_ID = 'E'
				}
				if (item.work_way == 'EOFI' || item.work_way == 'FONI') {
					this.E_F_ID = 'F'
				}
				uni.request({
					// url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/UjBSHrQTRK2KZb8?carcode=' + item.CARCODE +
					// 	'&id=' + item.ID,
					url: this.baseUrl + '/zlkj/wechat/yztx/' + item.carcode +
						'/' + item.id,
					method: "get",
					success: (res) => {
						let totalXc = 0
						let numXc = 0
						if(res.data.rows.length > 0) {
							// totalXc = Number(res.data.rows[0].xc) + Number(item.xc)
							// numXc = res.data.rows[0].numxc + 1
							res.data.rows.map(val => {
								totalXc = Number(val.xc) + Number(item.xc)
								numXc = Number(val.numxc) + 1
								return totalXc, numXc
							})
						}
						if (totalXc > 40 && numXc > 1 ) {
							uni.showToast({
								title: '预约箱尺数已超上限,不可预约',
								icon: 'none'
							})
							that.flag = false 
						} else {
						if (item.work_way == 'EOFI' || item.work_way == 'FINO') {
							that.activeItem = item
							that.showmodal = true
							if (item.xh == '' || item.xh == null) {
								that.showXh = true
							}
							that.xh = ""
							that.qfh = ""
						} else {
							if (item.xh == '' || item.xh == null) {
								uni.showModal({
									title: '请输入箱号',
									editable: true,
									success: function(res) {
										if (res.confirm) {
											if (res.content == '' || res.content ==
												undefined) {
												that.flag = false
												uni.showToast({
													title: '请输入箱号，',
													icon: 'none'
												})
												that.flag = false
												return
											}
											// uni.request({
											// 	url: 'https://api.zlkj-port.com/szgjapi/zlzg/cntr/check?cntr=' +
											// 		res.content,
											// 	method: "get",
											// 	success: (yzRes) => {
													// if (yzRes.data.code == 200) {
														uni.request({
															// url: 'https://api.zlkj-port.com/szgjapi/zlzg/U/jJHBM8ftt7hGPW8?E_F_ID='+that.E_F_ID+'&id=' +
															url: this.baseUrl +
																'/zlkj/wechat/hxyy/' +
																that.E_F_ID +
																'/' +
																item.id +
																'/' + item.xh
																// yzRes.data
																.message +
																'/1',
															method: "get",
															success: (
															res2) => {
																if (res2
																	.data
																	.message ==
																	'操作成功'
																	) {
																	uni.showToast({
																		title: '预约成功'
																	})
																
																	that.getState1()
																		
																}
																that.flag = false
															}
														})
											// 		} else {
											// 			uni.showToast({
											// 				title: yzRes.data
											// 					.message,
											// 				icon: 'none'
											// 			})
											// 			that.flag = false
											// 			return
											// 		}
											// 	}
											// })


										} else if (res.cancel) {
											that.flag = false
										}
									}
								});
							} else {
								uni.request({
									// url: 'https://api.zlkj-port.com/szgjapi/zlzg/U/jJHBM8ftt7hGPW8?E_F_ID='+this.E_F_ID+'&id=' +
									// 	item.ID + '&xh=' + item.XH + '&mark=0',
									url: this.baseUrl + '/zlkj/wechat/hxyy/' + this.E_F_ID +
										'/' +
										item.id + '/' + item.xh + '/0',
									method: "get",
									success: (res2) => {

										if (res2.data.msg == '操作成功') {
											uni.showToast({
												title: '预约成功'
											})
											that.getState1()
										}

										that.flag = false
									}
								})
							}
						}
						// 	}else{
						// 		that.getState1()
						// 	}
						// }}) 
						// }
					}
				}	});
			},
			onconfirmmodal() {
				let that = this
				if (that.activeItem.xh == '' || that.activeItem.xh == null) {

					if (that.qfh == '' || that.xh == '') {
						that.flag = false
						uni.showToast({
							title: '请输入信息',
							icon: 'none'
						})
						return
					}
					var isRight = /^\w+$/.test(that.qfh);
					if (!isRight) {
						that.flag = false
						uni.showToast({
							title: '铅封号有误',
							icon: 'none'
						})
						return
					}
					// uni.request({
					// 	url: 'https://api.zlkj-port.com/szgjapi/zlzg/cntr/check?cntr=' + that.xh,
					// 	method: "get",
						// success: (yzRes) => {
							if (that.xh) {
								if (this.BACK_E_F == 1) {
									uni.request({
										// url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/wm7CGdRlaaCOdJx?cntr=' +
										// 	that.xh,
										url: this.baseUrl + '/zlkj/wechat/getCountByXH/' + that.xh,
										method: "get",
										success: (res2) => {
											if (res2.data.total > 0) {
												uni.request({
													// url: 'https://api.zlkj-port.com/szgjapi/zlzg/U/uuBbE6eXzhhRdQY?cntr=' +
													// 	that.xh,
													url: this.baseUrl + '/zlkj/wechat/xgfz/' + that.xh,
													method: "get",
													success: (res2) => {
														if (res2.data.msg ==
															'操作成功') {
															uni.request({
																// url: 'https://api.zlkj-port.com/szgjapi/zlzg/U/NwEZff0GCfjNLKP?E_F_ID=' +
																// 	this.E_F_ID +
																// 	'&id=' +
																// 	that.activeItem.ID +
																// 	'&xh=' + yzRes.data.message +
																// 	'&qfno=' +that.qfh +
																// 	'&mark=1',
																url: this.baseUrl + '/zlkj/wechat/hzx',
																method: "POST",
																header: {
																	'Content-Type': 'application/x-www-form-urlencoded'
																},
																data: {
																	qfno: that.qfh,
																	xh: that.xh,
																	mark: 1,
																	E_OR_F: this.E_F_ID,
																	id: that.activeItem.id
																},
																success: (res3) => {
																	console.log(222)
																		if (res3.data.msg =='操作成功') {
																			uni.showToast({
																				title: '预约成功'
																			})
																			setTimeout(() => {
																				that.getState1()
																			}, 1000)	
												
																		}
																		that.showXh =
																			false
																		that.flag =
																			false
																	}
															})
														}
													}
												})

											} else {
												that.flag = false
												uni.showToast({
													title: '箱号没有对应的数据,请重新输入',
													icon: 'none'
												})
											}
										}
									})
								} else {
									uni.request({
										// url: 'https://api.zlkj-port.com/szgjapi/zlzg/U/NwEZff0GCfjNLKP?E_F_ID=' +
										// 	this.E_F_ID + '&id=' +
										// 	that.activeItem.ID + '&xh=' + yzRes.data.message +
										// 	'&qfno=' +
										// 	that.qfh + '&mark=1',
										url: this.baseUrl + '/zlkj/wechat/hzx',
										method: "POST",
										header: {
											'Content-Type': 'application/x-www-form-urlencoded'
										},
										data: {
											qfno: that.qfh,
											xh: that.xh,
											mark: 1,
											E_OR_F: this.E_F_ID,
											id: that.activeItem.id
										},
										success: (res3) => {
											console.log(res3)
											if (res3.data.msg == '操作成功') {
												uni.showToast({
													title: '预约成功'
												})
												
												setTimeout(() => {
													that.getState1()
												}, 1000)	
												
											}
											that.showXh = false
											that.flag = false
										}
									})
								}


							} else {
								uni.showToast({
									title: '箱号为空',
									icon: 'none'
								})
								that.flag = false
								return
							}
						// }
					// })


				} else {

					if (that.qfh == '') {
						that.flag = false
						uni.showToast({
							title: '请输入信息',
							icon: 'none'
						})
						return
					}
					var isRight = /^\w+$/.test(that.qfh);
					if (!isRight) {
						that.flag = false
						uni.showToast({
							title: '铅封号有误',
							icon: 'none'
						})
						return
					};
					uni.request({
						// url: 'https://api.zlkj-port.com/szgjapi/zlzg/U/NwEZff0GCfjNLKP?E_F_ID=' + this.E_F_ID +
						// 	'&id=' +
						// 	that.activeItem.ID + '&xh=' + that.activeItem.XH + '&qfno=' + that.qfh + '&mark=0',
						// method: "get",
						url: this.baseUrl + '/zlkj/wechat/hzx',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						method: "POST",
						data: {
							qfno: that.qfh,
							xh: that.xh,
							mark: 1,
							E_OR_F: this.E_F_ID,
							id: that.activeItem.id
						},
						success: (res2) => {
							console.log(1111)
							if (res2.data.msg == '操作成功') {
								uni.showToast({
									title: '预约成功'
								})
								
								setTimeout(() => {
									that.getState1()
								}, 1000)	
							
							}

							that.flag = false
							that.showXh = false
						}
					})
				}


			},
			oncancelmodal() {
				this.qfh = ''
				this.xh = ''
				this.activeItem = undefined
				this.showmodal = false
				this.showXh = false
			},
			tapCancel(item) {
				uni.request({
					// url: 'https://api.zlkj-port.com/szgjapi/zlzg/U/7IIhvCcP0IIfIgG?id=' + item.ID +
					// 	'&xh=' + item.XH,
					url: this.baseUrl + '/zlkj/wechat/fxyy/' + item.id,
					method: "get",
					success: (res2) => {
						// if (res2.data.msg == '操作成功') {
							uni.showToast({
								title: '取消成功'
							})
							setTimeout(() => {
								this.getState2()
							}, 1000)
						// }

					}
				})
			},
			tapShowMap(item) {
				uni.navigateTo({
					url: './cntr_plac_map?positionResult=' + item.CNTRPLAC
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F1F9;
	}
	.cxtxSubmit {
		margin: 20rpx;
		float: right;
	}
	.mainCon {
		.tabHead {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			background-color: #FFFFFF;

			.tabItem {
				width: 160rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				text-align: center;
				border: 1rpx solid #1A75FF;
				color: #868887;
				font-size: 26rpx;
			}

			.active {
				background-color: #1A75FF;
				color: #FFFFFF;
			}
		}

		.orderList {
			width: 700rpx;
			margin: 20rpx auto;

			.orderItem {
				background-color: #FFFFFF;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.orderHead {
					.headcell {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.leftCon {
							display: flex;
							align-items: center;

							.labelTag {
								background-color: #E0EDFB;
								color: #4C86E7;
								width: 150rpx;
								line-height: 50rpx;
								border-radius: 25rpx;
								font-size: 26rpx;
								text-align: center;
								margin-right: 15rpx;
							}
						}

						.status1 {
							color: #4C86E7;
							font-size: 26rpx;
						}

						.dateLabel {
							color: #858585;
						}

						.status2 {
							color: #E94340;
							font-size: 30rpx;
						}
					}
				}

				.orderInfo {
					margin-top: 20rpx;
					border-top: 1rpx dashed #C1C3C2;
					padding-top: 20rpx;

					.infoCell {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						.labelTag {
							background-color: #E0EDFB;
							color: #4C86E7;
							width: 150rpx;
							line-height: 50rpx;
							border-radius: 25rpx;
							font-size: 26rpx;
							text-align: center;
							margin-right: 15rpx;
						}

						.labelName {
							color: #C1C3C2;
							font-size: 28rpx;
							margin-right: 15rpx;
							width: 175rpx;
						}

						.infoCon {
							color: #87888A;
						}
					}
				}

				.bottomActions {
					margin-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.delete {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}

					.confirm {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}
				}
			}
		}
	}
</style>
